import React ,{Component} from 'react';

import styles from '../../base.css';//导入
import imageLower from '../../image/lower.png';
import Request from '../FetchRequest';
import newsJson from '../../news.json';
import Utils from '../Utils';
import NavLink from '../NvLink';

import {
    BrowserRouter as Router,
    Route,
    Link
  } from 'react-router-dom';

/**
 * 动态
 */
class News  extends Component{

    constructor(props) {
    super(props);
    this.state = { news:[]}
    }
  
 /**
  * 在声明周期函数中初始数据
  */
    componentDidMount(){
        // let that = this;
        Request.fetchGET('/promotion/news?isRecommend=1&isUpset=false&limit=4&offset=1&type=2', () => {
            console.log('加载数据！');
        }).then((resp) => {
            if (resp.ok) {
                resp.json().then((obj)=> {
                    this.setState({
                        // news:new Array(obj.data[0])
                        // news:obj.data
                        news:newsJson
                    });
                });
            }else{
                that.setState({
                    news:newsJson
                });
            }

        }).catch((error)=>{
            that.setState({
                news:newsJson
            });
        });
    }

	render(){
        console.log(this.state.news);
		return(
			<div className={styles.news}>
                <div className={styles.newsBg}>
                <div style={{height:'40px'}}></div>
                    <h1>方案推荐</h1>
                      <h3>PROGRAMME</h3>
                      <div className={styles.programmeLine}></div>
                      <div className={styles.programmeShortLine}></div>
                      <img src={imageLower}/>
                </div>
                <div className={styles.newsContet}>
                     <div className={styles.newsContetWarpper}>
                     <div style={{width:'1170px',marginTop:'80px'}}></div>
                        <ul>
                        {
                            this.state.news.map((news,index,arr)=>{

                                return(
                                
                                    <NavLink  key={index}  to="/test">   
                                        <li className={styles.newsItem}>
                                           
                                                <div className={styles.newsItemLeft}>
                                                    <div className={styles.newsDateWarpper}>
                                                        <p style={{fontSize: '22px'}}> { Utils.Dateformat(news.createTime,'dd') }</p>
                                                    </div>
                                                    <p style={{fontSize: '15px',marginTop: '5px'}}> { Utils.Dateformat(news.createTime,'yyyy-MM')}</p>
                                                </div>

                                                <div className={styles.newsItemRight}>
                                                    <h4>{news.title}</h4>
                                                    <p>{news.dis}</p>
                                                </div>
                                           
                                        </li>
                                        </NavLink>
                                      
                                      
                                );
                            })

                        }
                        </ul>
                     </div>
                </div>
            </div>
		);
	}
}

export default News;